<template>
	<view style="background-color: #f4f4f4;">
		<view class="top1">

			<view :class="{item1:true,active:activeIndex==='1'}" @click="navageto('1')">
				首页
			</view>
			<view :class="{item1:true,active:activeIndex==='2'}" @click="navageto('2')">
				操作页
			</view>
			<view :class="{item1:true,active:activeIndex==='3'}" @click="navageto('3')">
				消息页
			</view>
			<view :class="{item1:true,active:activeIndex==='4'}" @click="navageto('4')">
				课程页
			</view>
			<view :class="{item1:true,active:activeIndex==='4'}" @click="navageto('5')">
				测试
			</view>
			<Isout></Isout>
		</view>
		<view class="main">
			<!-- 个人信息 -->
			<view class="m_top">
				<image class="top_img" src="https://thirdqq.qlogo.cn/g?b=qq&nk=418005852&s=100" mode="aspectFill">
				</image>

			</view>
			<!-- 模块 -->
			<view class="m_modle clearfloat">
				<!-- 进度 -->
				<view class="mm_item">
					<view class="mt1">
						当前课程进度
					</view>
					<el-divider></el-divider>
					<view class="mt2">
						<ModlItem></ModlItem>
						<ModlItem></ModlItem>
						<ModlItem></ModlItem>
					</view>
				</view>
				<!-- 班级详情 -->
				<view class="mm_item">
					<view class="mt1">
						班级详情
					</view>
					<el-divider></el-divider>
					<view class="mt3">
						<view>班级名称：</view>
						<view>班级管理员：</view>
						<view>班级人数：</view>
						<view>加入时间：</view>
						<view>个人详情：</view>
					</view>
				</view>
				<!-- 考试详情 -->
				<view class="mm_item">
					<view class="mt1">
						考试详情
					</view>
					<el-divider></el-divider>
					<view class="mt4">
						<el-table :data="tableData" style="width: 100%">
							<el-table-column align="center" prop="name" label="考试名称" width="180">
							</el-table-column>
							<el-table-column align="center" prop="date" label="时间" width="180">
							</el-table-column>
							<el-table-column align="center" prop="address" label="得分">
								<template slot-scope="scope">
									<el-tag type="success">55</el-tag>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="name" label="操作" width="80">
								<el-button size="mini" type="danger">详情
								</el-button>
							</el-table-column>
						</el-table>
					</view>
				</view>
				<!-- 项目展示 -->
				<view class="mm_item">
					<view class="mt1">
						项目展示
					</view>
					<el-divider></el-divider>
					<view class="mt4">
						<el-table :data="projects" style="width: 100%">
							<el-table-column align="center" prop="name" label="项目">
							</el-table-column>
							<el-table-column align="center" prop="name" label="项目源码" width="150">
								<el-button size="mini" type="danger">查看
								</el-button>
							</el-table-column>
							<el-table-column align="center" prop="name" label="项目展示" width="150">
								<el-button size="mini" type="danger">查看
								</el-button>
							</el-table-column>
						</el-table>
					</view>
				</view>
				<!-- 个人展示 -->
				<view class="mm_item">
					<view class="mt1">
						个人展示
					</view>
					<el-divider></el-divider>
					<view class="mt3">
						<view>个人博客：</view>
						<view>CSDN：</view>
						<view>GitHub：</view>
						<view>Gitee：</view>
					</view>
				</view>
			</view>
		</view>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
			<span>登录信息已经过期，请重新登录！</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="queren">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import ModlItem from '../component/modluitem.vue'
	import Isout from '../component/goout.vue'
	export default {
		components: {
			ModlItem,
			Isout
		},
		data() {
			return {
				dialogVisible: false,
				activeIndex: '1',
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				projects: [{
						name: '小米官网'
					},
					{
						name: 'vue后台管理系统'
					},
					{
						name: '二手小程序'
					}
				]
			};
		},
		onLoad() {
			// this.getlist()
			this.getUserpro()
		},
		onShow() {
			console.log(uni.getStorageSync('uni_id_token_expired'));
			if(uni.getStorageSync('uni_id_token')&&uni.getStorageSync('uni_id_token_expired')){
				let num=+new Date()
				if(uni.getStorageSync('uni_id_token_expired')<num){
					this.dialogVisible=true
				}else{
					this.dialogVisible=false
				}
			}else{
				this.dialogVisible=true
			}
		},
		methods: {
			queren(){
				this.dialogVisible=false
				 uni.clearStorageSync();
				uni.reLaunch({
					url:'../login/login'
				})
			},
			navageto(id) {
				if (id === '2') {
					uni.switchTab({
					    url: '/pages/home/upload/upload'
					});
				} else if (id === '3') {
					uni.switchTab({
					    url: '/pages/home/message/message'
					});
				} else if (id === '4') {
					uni.switchTab({
					    url: '/pages/home/course/course'
					});
				}else{
					uni.navigateTo({
						url:'../ceshi/ceshi'
					})
				}
			},
			async getlist() {
				const db = uniCloud.database()
				let res = await db.collection('kec_list').orderBy("videosort desc").get()
				console.log(res);
			},
			async getUserpro() {
				let id = uni.getStorageSync('uni_id')
				const db = uniCloud.database()
				let res = await db.collection('userclass').where('userid=="' + id + '"').get({
					getOne: true
				})
				console.log(res);
				uni.setStorageSync('userpro',res.result.data)
			}
		}
	}
</script>

<style lang="scss">
	.top1 {
		width: 100%;
		height: 60px;
		background-color: #545c64;
		display: flex;
		padding-bottom: 3px;
		padding: 0px 100px;
	}

	.item1 {
		width: 70px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}

	.active {
		color: #ffd04b;
		border-bottom: 3px solid #ffd04b;
	}

	.main {
		padding: 20px 100px;
		width: 100%;
	}

	.m_top {
		width: 100%;
		height: 100px;

	}

	.top_img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-top: 20px;
	}

	.m_modle {}

	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}

	.clearfloat {
		zoom: 1
	}

	.mm_item {
		float: left;
		width: 47%;
		height: 300px;
		background-color: #fff;
		margin: 10px 10px;
	}

	.mt1 {
		font-size: 20px;
		height: 30px;
		font-weight: bold;
		text-align: center;
	}

	.el-divider {
		margin: 6px 0;
	}

	.mt2 {
		height: 250px;
		width: 100%;
		display: flex;
		overflow: hidden;
		overflow-x: auto;
	}

	.mt3 {
		height: 250px;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: space-around;
		align-items: center;
	}

	.mt4 {
		height: 250px;
		width: 100%;
		overflow: hidden;
		overflow-y: auto;
	}

	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: #fff;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #fff;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
	}

	.item1tt {
		width: 100%;
		height: 30px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.gg1 {
		width: 40%;
		height: 3px;
		background-color: #666;
	}

	.items1 {
		width: 30%;
		height: 250px;
		margin: 0px 44px;
	}

	.iconum {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		text-align: center;
		line-height: 20px;
		font-size: 18px;
		border: 2px solid #000;
		font-weight: bold;

	}

	.title12 {
		width: 100%;
		height: 25px;
		line-height: 25px;
		text-align: center;
		margin: 20px 0;
	}

	.progress33 {
		text-align: center;
	}
</style>
